<template>
  <div class="info">
    <p class="title">修改密码</p>
    <hr/>
    <div class="personal">
      <el-form :model="passwordForm" class="demo-ruleForm" label-width="80px">
        <el-form-item label="旧密码">
          <el-input type="password" placeholder="旧密码" v-model="passwordForm.oldpassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="passwordForm.newpassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="passwordForm.conpassword" placeholder="确认密码"></el-input>
        </el-form-item>
      </el-form>
    <div class="btn">
      <div @click="saveMsg()">保存</div>
      <div @click="goback">取消</div>
    </div>
    </div>
</div>
</template>

<script>
import mixin from '../mixin'
import { mapGetters } from 'vuex'
import { HttpManager } from '../api/index'

export default {
  name: 'info',
  mixins: [mixin],
  data: function () {
    return {
      passwordForm: { // 密码信息
        oldpassword: '',
        newpassword: '',
        conpassword: ''
      },
      oldpass: ''
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  mounted () {
    this.getMsg(this.userId)
  },
  methods: {
    getMsg (id) {
      HttpManager.getUserOfId(id)
        .then(res => {
          this.oldpass = res[0].password
        })
        .catch(err => {
          console.log(err)
        })
    },
    goback () {
      this.$router.go(-1)
    },
    saveMsg () {
      if(this.oldpass === this.passwordForm.oldpassword){
        if(this.passwordForm.conpassword === this.passwordForm.newpassword){
          let params = new URLSearchParams()
          params.append('id', this.userId)
          params.append('password', this.passwordForm.newpassword)
          HttpManager.updateUserPassword(params)
            .then(res => {
              if (res.code === 1) {
                this.showError = false
                this.showSuccess = true
                this.$notify.success({
                  title: '编辑成功',
                  showClose: true
                })
                setTimeout(function () {
                  // this.$router.go(-1)
                  history.go(-1)
                }, 1000)
              } else {
                this.showSuccess = false
                this.showError = true
                this.$notify.error({
                  title: '修改失败',
                  showClose: true
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
        else {
          this.$notify.warning({
            title: '两次密码不一致！请确认密码',
            showClose: true
          })
        }
      }
      else {
        this.$notify.error({
          title: '密码错误，请重新输入',
          showClose: true
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/info.scss';
</style>
